<template>
	<div class="project">
		<div class="manage">
			<el-dialog :title="operateType === 'add' ? '新增项目' : '更新项目'" :visible.sync="isShow">
				<el-form label-width="100px">
					<el-form-item label="项目名称" prop="pname">
						<el-input v-model="pname" placeholder="请输入项目名称"></el-input>
					</el-form-item>
					<el-form-item label="项目描述" prop="pdescription">
						<el-input v-model="pdescription" placeholder="请输入项目描述"></el-input>
					</el-form-item>

					<el-form-item label="  " prop="btn">
						<el-button @click="isShow = false" icon="el-icon-close">取消</el-button>
						<el-button type="success" icon="el-icon-check" @click="submit">确定</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
		</div>
		<div class="header">
			<el-input @change="get" v-model="input" placeholder="请输入内容"></el-input>
			<el-button type="info" icon="el-icon-search">查询</el-button>
			<el-button type="primary" @click="addProject" icon="el-icon-plus">添加</el-button>
		</div>
		<div class="wrapper">
			<el-table :data="tableData.slice((cur-1)*pageSize, cur*pageSize)" style="width: 100%"
				:default-sort="{ prop: 'date', order: 'descending' }">
				<el-table-column prop="pname" label="项目名称" sortable min-width="15%">
				</el-table-column>
				<el-table-column prop="pdescription" label="项目描述" sortable min-width="15%">
				</el-table-column>
				<el-table-column prop="time" label="更新时间" sortable min-width="15%">
				</el-table-column>
				<el-table-column prop="user" label="更新用户" sortable min-width="20%">
				</el-table-column>
				<el-table-column label="操作" min-width="20%">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑
						</el-button>
						<el-button size="mini" type="danger" icon="el-icon-delete" @click="del(scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div style="text-align:center;margin:20px">
			<el-pagination background layout="prev, pager, next" @current-change="current_change"
				:total="tableData.length" :page-size="pageSize">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import axios from "axios";
	let userInfo = JSON.parse(localStorage.getItem('userIngo'));
	
	export default {
		inject: ["reload"],
		name: "project",
		components: {},
		data() {
			return {
				id: '',
				pname: '',
				pdescription: '',
				time: '',
				user: '',
				operateType: "add",
				isShow: false,
				input: "",
				tableData: [],
				cur: 1, //当前页
				total: 0, //总页数
				pageSize: 8, //每页展示的内容
			};
		},
		//生命周期函数
		created() {
			this.$api.getprojectList().then((res) => {
				this.tableData = res.data;
			});
		},
		methods: {
			current_change(newPage) {
				this.cur = newPage
			},
			createId() { //生成随机id
				var code = '';
				var codeLength = 4;
				var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
				for (var i = 0; i < codeLength; i++) {
					var index = Math.floor(Math.random() * 9)
					code += random[index]
				}
				return code
			},
			getCurrentTime() {
				//获取当前时间并打印
				let yy = new Date().getFullYear();
				let mm = new Date().getMonth() + 1;
				let dd = new Date().getDate()+1;
				let time = yy + '-' + mm + '-' + dd;
				return time;

			},
			handleEdit(row) {
				this.operateType = "edit";
				this.isShow = true;
				this.id = row.id;
				this.pname = row.pname;
				this.pdescription = row.pdescription;
				this.time = this.getCurrentTime();
				this.user = userInfo.name;
			},
			get(val) { //查询操作
				axios
					.get("http://localhost:9999/plist/get", {
						params: {
							pname: val,
						},
					})
					.then((res) => {
						this.tableData = res.data;
					})
					.catch((err) => {
						console.log(获取数据失败);
					});
			},
			submit() {
				if (this.operateType === "add") { //添加商品
					axios.get('http://localhost:9999/plist/add', {
						params: {
							id: this.createId(),
							pname: this.pname,
							pdescription: this.pdescription,
							time: this.getCurrentTime(),
							user: userInfo.name,
						}
					}).then((res) => {
						this.reload();
						this.isShow = false
					}).catch((err) => {
						console.log("数据获取失败" + err);
					});
				} else { //编辑商品
					axios.get('http://localhost:9999/plist/update', {
						params: {
							id: this.id,
							pname: this.pname,
							pdescription: this.pdescription,
							time: this.getCurrentTime(),
							user: userInfo.name,
						}
					}).then(res => {
						this.isShow = false
						this.reload()
					}).catch(err => {
						console.log('数据获取失败' + err)
					})
				}
			},
			addProject() { //添加商品 打开表单
				this.isShow = true;
				this.operateType = "add";
				this.pname = '',
				this.pdescription = ''
			},
			del(row) { //删除商品
				this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
					.then(() => {
						axios
							.get("http://localhost:9999/plist/del", {
								params: {
									pname: row.pname,
								},
							})
							.then((res) => {
								this.reload();
								this.$message({
									type: "success",
									message: "删除成功!",
								});
							});
					})
					.catch((err) => {
						this.$message({
							type: "info",
							message: "已取消删除",
						});
					});
			},
		},
		mounted(){
			let userInfo = JSON.parse(localStorage.getItem('userIngo'));
			// console.log(userInfo.name);
		},
	};
</script>
<style lang='less' scoped>
	.project {
		margin: 20px;
		height: 592px;
	}

	.header {
		display: flex;

		button {
			margin-left: 20px;
		}
	}

	.wrapper {
		margin: 20px;
	}
</style>
